<template>
<div class="pic-main">
  <el-card class="box-card" shadow="never">
    <el-upload
      class="upload-demo"
      :action="saveurl+'/api/leju/admin/material/uploadAndSaveImg'"
      :on-success="successimg"
      >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>

  </el-card>
  <el-row :gutter="10">
   <el-col :span="6" v-for="item in piclist" :key="item.id">
     <el-card class="box-card" >
       <div slot="header" class="clearfix">
         <el-button type="danger" @click="del(item.id)">删除</el-button>
       </div>
      <div>
        <img style="width: 100%;height: 460px;" :src="item.ossUrl" alt="">
      </div>
     </el-card>
   </el-col>
  </el-row>

</div>

</template>

<script>
import saveUrl from '@/settings'
import materiaApi from "@/api/product/materia";
export default {
name: "materialPic",
data(){
return{
  saveurl:saveUrl.host,
    piclist:[]
}

},
methods:{
getMeatilList(){
  materiaApi.getmaterialList()
  .then(res=>{
    this.piclist = res.data.list
    console.log(res)
  })
},
  successimg(){
  this.getMeatilList()
  },
  del(id){
    console.log(id)
    materiaApi.delMaterial({
      id:id
    })
    .then(res=>{
      this.getMeatilList()
    })
  }
},
created(){
  this.getMeatilList()
}
}
</script>

<style lang="scss" scoped>
.pic-main{
.box-card{
  width: 95%;
  margin: 15px auto;
}
}
</style>
